<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 创建元素: document.createElement('html标签名')
        let h1 = document.createElement('h1')
        // 返回: 返回当前创建的标签对象



        // 添加元素
        //添加到父元素的末尾:           appendChild    
        // 语法: 父元素标签对象.appendChild(创建的标签对象)
        let ul = document.createElement('ul')
        body.appendChild(ul)
        ul.appendChild(li)
        //添加到父元素中任意的位置:     insertBefore 
        // 语法: 父元素标签对象.insertBefore(创建的标签对象, 目标元素)
        let ul = document.createElement('ul')
        body.appendChild(ul)
        ul.appendChild(li)



        // 删除元素
        // 父元素标签对象.removeChild(要被移除的元素)
        body.removeChild(h1)



        // 获取父级元素
        // 语法: 父元素标签对象.parentNode
        let p = document.querySelector('p')
        console.log(p.parentNode);

        // 获取子级元素
        // 语法:  子元素标签对象.children
        获取多个, 以数组形式输出.children
        let ul = document.querySelector('ul')
        console.log(ul.children);

        // 兄弟元素
        // 下一个同级标签
        // 标签对象.nextElementSibling
        h1.nextElementSibling
        // 上一个同级标签
        // 标签对象.previousElementSibling
        h1.previousElementSibling





        // 事件流:  在嵌套结构中发生事件流现象
        // ☞ 事件冒泡: 在嵌套结构中,事件从子元素(内)向父元素(外)传递
        // ☞ 事件捕获: 在嵌套结构中,事件从父元素(外)向子元素(内)传递
        // 注意: 
        // 1. 如果要看到事件捕获现象---> 注册事件的时候,必须使用 addEventListener
        // 2. addEventListener 第三个参数必须设置为true
        // ☞ 通过 事件对象参数.stopPropagation() 阻止事件冒泡



        // 委托思想: 本应该自己完成的事情(注册事件),交给父元素注册事件
        // 将点击的工作交给父级元素(减少代码量)
        // 事件对象参数.target     
        // 相当于在事件源范围内,点哪哪反应,配合其他的标签或指令可以划定生效范围
        例: 加 innerText 就是生效范围为文字
        let ul = document.querySelector('ul')
        ul.onclick = function (a) {
            console.log(a.target.innerText);
        }
        例: 加.parentNode 就是范围限定为两级父元素之内
        thead.onclick = function (cc) {
            let del = cc.target.parentNode.parentNode
            thead.removeChild(del)
        }



        // 用户输入事件: input事件
        //  用户输入就会执行该事件, 给表单元素注册



        //获取内容长度: 内容.length 
        let str = 'adsfafafadadfadfaf';
        console.log(str.length);
    </script>
</body>

</html>